<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>记事本</title>
    <style>
      button {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: 100%;
        vertical-align: baseline;
        appearance: none;
      }
      h1 {
        color: violet;
        text-align: center;
      }
      #noteBook {
        width: 600px;
        box-shadow: 2px 2px 10px #909090;
        margin: 50px auto;
      }
      .inputTxt::-webkit-input-placeholder {
        color: #ccc;
        font-style: italic;
      }
      .inputTxt {
        position: relative;
        margin: 0;
        width: 100%;
        font-size: 24px;
        outline: none;
        line-height: 1.4em;
        padding: 6px;
        border: 1px solid #999;
        box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        padding: 16px;
        border: none;
        background: rgba(0, 0, 0, 0.003);
        box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: 420px;
        overflow: auto;
      }
      ul li {
        position: relative;
        font-size: 24px;
        border: 1px solid #ededed;
        height: 60px;
        box-sizing: border-box;
      }
      ul li:last-child {
        border-bottom: none;
      }
      ul li .index {
        position: absolute;
        color: gray;
        left: 10px;
        top: 20px;
        font-size: 16px;
      }
      ul li label {
        word-break: break-all;
        padding: 15px 15px 15px 60px;
        display: block;
        color: gray;
        line-height: 1.2;
        font-weight: normal;
        transition: color 0.4s;
        font-weight: 300;
      }

      /* 叉叉框 */
      .destroy {
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto 0;
        font-size: 30px;
        color: #cc9a9a;
        margin-bottom: 11px;
      }
      .destroy:hover {
        color: #af5b5e;
      }
      ul li:hover .destroy {
        display: block;
      }
      .destroy::after {
        content: "×";
      }
      /* 底部操作栏 */
      .footer {
        border-top: 1px solid #e6e6e6;
        height: 40px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
          0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
          0 17px 2px -6px rgba(0, 0, 0, 0.2);
      }

      .footer .sum {
        line-height: 40px;
        margin-left: 20px;
        color: gray;
        font-weight: normal;
      }
      .footer strong {
        font-weight: 300;
      }
      .clear {
        float: right;
        position: relative;
        line-height: 40px;
        margin-right: 20px;
        color: gray;
        text-decoration: none;
        cursor: pointer;
      }
      .clear:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div id="noteBook">
      <input
        type="text"
        @keyup.enter="add"
        v-model="message"
        class="inputTxt"
        autofocus="autofocus"
        autocomplete="off"
        placeholder="请输入任务"
      />
      <ul>
        <li v-for="(item,index) in arr">
          <div class="view">
            <span class="index">{{index+1}}.</span>
            <label>{{item}}</label>
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
      <footer class="footer" v-show="arr.length!=0">
        <span class="sum" v-if="arr.length!=0">
          <strong>{{arr.length}}</strong>items left
        </span>
        <button class="clear" @click="clear">clear</button>
      </footer>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var noteBook = new Vue({
        el: "#noteBook",
        data: {
          arr: ["吃饭饭", "睡觉觉", "写代码"],
          message: "",
        },
        methods: {
          add: function () {
            this.arr.push(this.message);
          },
          remove: function (index) {
            this.arr.splice(index, 1);
          },
          clear: function () {
            this.arr = [];
          },
        },
      });
    </script>
  </body>
</html>
